<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="static/js/scrollreveal.min.js"></script>
    <link rel="stylesheet" href="static/css/all.min.css" />
    <link rel="stylesheet" href="static/css/glide.core.min.css"/>
    <link rel="stylesheet" href="static/css/glide.theme.min.css"/>
    <link rel="stylesheet" href="static/css/style.css" />
    <title>xxx21岁生日快乐！</title>
    <!-- <script>
        function playBgm() {
            const bgm = document.getElementById('bgm');
            if (bgm.paused) {
                bgm.play();
            }
        }
    </script> -->
</head>
<body>
    <audio id="bgm" autoplay preload="auto" loop>
        <source src="https://zzy-birthday.oss-cn-qingdao.aliyuncs.com/0001.mp3">
    </audio>
    <header>
        <div class="logo">送给你的生日礼物</div>
        <nav>
            <a href="#home">主页</a>
            <a href="#about-us">关于我们</a>
            <!-- <a href="#showcases">怎么能这么漂亮</a> -->
            <a href="#service">我眼中的xxx</a>
            <a href="#company-activities">想对你说</a>
            <!-- <i class="fa fa-search" style="margin-left:15px;"></i> -->
        </nav>
        <div class="burger">
            <div class="burger-line1"></div>
            <div class="burger-line2"></div>
            <div class="burger-line3"></div>
        </div>
    </header>
    <div id="home" class="glide">
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
                <div class="glide__slide">
                    <div class="slide-caption">
                        <h2>如果我们不曾相遇 你又会在哪里<br/>
                            如果我们从不曾相识 人间又如何运行
                        </h2>
                        <h3>那一天 那一刻 那个场景<br/>
                            你出现在我生命</h3>
                        <!-- <button class="explore-btn" onclick="playBgm()">点点我吧</button> -->
                    </div>
                    <div class="backdrop"></div>
                    <img src="static/picture/happymusic.jpg" alt="" />
                </div>
                <div class="glide__slide">
                    <div class="slide-caption">
                        <h2>未知的 未来里 未定几率 然而此刻拥有你 <br/>
                            某一天 某一刻 某次呼吸 我们终将再分离</h2>
                        <h3>如果我们不曾相遇 我又会在哪里 <br/>
                            如果我们从不曾相识 不存在这首歌曲
                        </h3>
                        <!-- <button class="explore-btn">点点我吧</button>     -->
                    </div>
                    <div class="backdrop"></div>
                    <img src="static/picture/happybrd.jpg" alt="" />
                </div>
                <div class="glide__slide">
                    <div class="slide-caption">
                        <h2>希望xxx美女的21岁<br/>
                            天天开心 心想事成
                        </h2>
                        <h3>你的开心 <br/>
                            比对错更重要
                        </h3>
                        <!-- <button class="explore-btn">点点我吧</button> -->
                    </div>
                    <div class="backdrop"></div>
                    <img src="static/picture/happyimp.jpg" alt="" />
                </div>
            </div>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
               &lt;   
            </button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
               &gt;
               </button>
   
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <button class="glide__bullet data-glide-dir="0"></button>
            <button class="glide__bullet data-glide-dir="1"></button>
            <button class="glide__bullet data-glide-dir="2"></button>
        </div>
    </div>
    <div class="content-wrapper">
        <section id="about-us" class="about-us">
            <h2 class="title1">关于我们</h2>
            <p class="intro">
                要说我们是怎么认识的，那要感谢实验，要说我们是怎么熟起来的，那要感谢我们。
            </p>
            <div class="features">
                <div class="feature">
                <i class="fas fa-lightbulb"></i>
                    <h4 class="feature-title">2016-2017</h4>
                    <p class="feature-content">
                        是我们都进入实验的那一年
                    </p>
                </div>
                <div class="feature">
                    <i class="fas fa-lightbulb"></i>
                    <h4 class="feature-title">2017-2018</h4>
                   <p class="feature-content">
                       是还不认识，但知道了有个小姑娘叫xxx的一年
                    </p>
                </div>
                <div class="feature">
                   <i class="fas fa-lightbulb"></i>
                    <h4 class="feature-title">2018-2019</h4>
                     <p class="feature-content">
                         是高三那年，你来我宿舍祝我生日快乐，我放学跟着你回宿舍的一年
                        </p>
                </div>
                <div class="feature">
                    <i class="fas fa-lightbulb"></i>
                    <h4 class="feature-title">2019-2020</h4>
                    <p class="feature-content">
                        是我去复读，你去大学，我们都在努力适应，相互鼓励的一年
                    </p>
                </div>
                <div class="feature">
                    <i class="fas fa-lightbulb"></i>
                    <h4 class="feature-title">2020-2021</h4>
                    <p class="feature-content">
                        是我们几乎每天聊天，真正的无话不说的一年
                    </p>
                    </div>
                <div class="feature">
                        <i class="fas fa-lightbulb"></i>
                        <h4 class="feature-title">2021-2022</h4>
                        <p class="feature-content">
                            将会是很好的一年
                        </p>
                        </div>
            </div>
        </section>
        <!-- <section id="showcases" class="showcases section-bg">
            <h2 class="title1">怎么能这么漂亮</h2>
            <div class="filter-btns">
                <button class="filter-btn active" data-filter="*">全部</button>
                <button class="filter-btn" data-filter=".two">2022</button>
                <button class="filter-btn" data-filter=".one">2021</button>
                <button class="filter-btn" data-filter=".zero">2020</button>
            </div>
            <div class="cases">
                <div class="case-item one">
                    <img src="static/picture/001.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/002.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/003.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/004.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/005.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/006.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/007.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/008.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/009.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/033.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/011.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/012.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/013.jpg" alt="">
                </div>
                <div class="case-item two">
                    <img src="static/picture/014.jpg" alt="">
                </div>
                <div class="case-item two">
                    <img src="static/picture/015.jpg" alt="">
                </div>
                <div class="case-item two">
                    <img src="static/picture/016.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/017.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/018.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/019.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/020.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/021.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/022.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/023.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/024.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/025.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/026.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/027.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/028.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/029.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/030.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/031.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/032.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/040.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/041.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/042.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/043.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/044.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/045.jpg" alt="">
                </div>
                <div class="case-item one">
                    <img src="static/picture/046.jpg" alt="">
                </div>
                <div class="case-item zero">
                    <img src="static/picture/047.jpg" alt="">
                </div>
            </div>
        </section> -->
        <section id="service" class="service">
            <h2 class="title1">我眼中的xxx</h2>
            <p class="intro">虽然是网友，但还是多多少少的猜测出一些姐的喜好、想法、和小心思，谁让我是大聪明呢</p>
            <div class="services">
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">piu亮</h4>
                    <p class="service-content">咱就是说，我眼中的xxx首先肯定是大美女啦，平时夸的还少吗，我就是姐的一号粉头子！
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">不较真儿</h4>
                    <p class="service-content">这是我最喜欢姐的一点，不拧巴，不较真儿，有事儿说事儿，不阴阳怪气儿，相处起来很舒服，一点压力也没有。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">细腻</h4>
                    <p class="service-content">虽然姐大大咧咧的，但是一个很细腻的小姑娘，可以考虑到别人的感受，为别人着想，还能感觉到我情绪波动，就是说不敢小瞧姐姐。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">可爱</h4>
                    <p class="service-content">看起来很成熟，外表像大姐姐，但我觉得还挺可爱的小姑娘，没有刚开始看起来那么凶~
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">靠谱</h4>
                    <p class="service-content">虽然爱玩，爱开玩笑，但是到正经事情上还是很拎得清，很靠谱的一女的
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">傻逼</h4>
                    <p class="service-content">纯 纯 大 傻 逼
                    </p>
                </div>
            </div>
        </section>
        <section class="data-section">
            <div class="data-piece">
                <i class="fas fa-code"></i>
                <div class="num">1183</div>
                <div class="data-desc">天的好友</div>
            </div>
            <div class="data-piece">
                <i class="fas fa-award"></i>
                <div class="num">1</div>
                <div class="data-desc">次出去玩</div>
            </div>
            <div class="data-piece">
                <i class="fas fa-laugh-wink"></i>
                <div class="num">3</div>
                <div class="data-desc">次生日</div>
            </div>
            <div class="data-piece">
                <i class="fas fa-folder"></i>
                <div class="num">1400</div>
                <div class="data-desc">公里的距离</div>
            </div>
        </section>
        <section id="company-activities" class="company-activities">
            <h2 class="title1">想对你说</h2>
            <p class="intro">说一些想说的，好他妈肉麻啊！</p>
            <div class="activities">
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="static/picture/aiwo.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="data-published">
                            <i class="far fa-calendar" style="margin-right: 5px;"></i>
                            2022年2月12日
                        </p>
                        <p class="comments">
                            <i class="fa fa-comments" style="margin-right: 5px;"></i>
                            你是我的好姐姐
                        </p>
                    </div>
                    <h2 class="act-title">还不是太熟</h2>
                    <article>那天视频我说，我感觉我们的关系好不稳定，似乎很容易就分崩离析了，所以我会小心翼翼的，不该说的和该说的都不说。好像我很少和你正经说，说我希望你多在乎我一点，又好像经常开很多玩笑，来让这些话显得不那么肉麻和做作。我总结为是我爱胡思乱想，所以我和自己说，请我不要想太多，和你说，请你再多爱我一点。</article>
                </div>
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="static/picture/mingtianjian.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="data-published">
                            <i class="far fa-calendar" style="margin-right: 5px;"></i>
                            2022年2月12日
                        </p>
                        <p class="comments">
                            <i class="fa fa-comments" style="margin-right: 5px;"></i>
                            此时此刻
                        </p>
                    </div>
                    <h2 class="act-title">总是在分别</h2>
                    <article>有相遇就会有分别，所以我原本以为分别的次数和相遇的次数总是相等的，但对于我们来说，却好像一直在分别。刚认识加到好友的时候，我们毕业了，上大学的时候，隔着1400公里，现在你又要去更远的地方了，我们的距离更大了。我不知道以后会怎么样，不知道你从国外回来会变成什么样子，也不知道以后的我会变成什么样子，但此时此刻，你就是我最在意的朋友，我希望你永远快乐，不只生日。</article>
                </div>
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="static/picture/baby.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="data-published">
                            <i class="far fa-calendar" style="margin-right: 5px;"></i>
                            2022年2月12日
                        </p>
                        <p class="comments">
                            <i class="fa fa-comments" style="margin-right: 5px;"></i>
                            宝贝
                        </p>
                    </div>
                    <h2 class="act-title">我想说</h2>
                    <article> 你永远是  我的宝贝</article>
                </div>
            </div>
        </section>  
    </div>
    <footer>
        <div class="footer-menus" style="text-shadow: 0 0 2px rgb(100,100,100);">
            <div class="contact-us">
                <p class="menu-title">关于这个网页</p>
                <p>
                    我做了好久好久啦，写了得有一千多行代码，而且写<br/>
                    的时候现学现卖，老是出bug。咱就是说，咱真的想<br/>
                    不起来哪份礼物比这个更用心了，你就算不喜欢，也<br/>
                    得给我装喜欢！
                </p>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">听听歌吧</p>
                <ul class="menu-items">
                    <li><a href="https://music.163.com/#/song?id=1366216050" target="blank">这是我一生中最勇敢的瞬间</a></li>
                    <li><a href="https://music.163.com/#/song?id=458356832" target="blank">你要如何，我们就如何</a></li>
                </ul>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">有一首有彩蛋哦</p>
                <ul class="menu-items">
                    <li><a href="https://music.163.com/#/song?id=1303027499" target="blank">总有一天你会出现在我身边</a></li>
                    <li><a href="https://music.163.com/#/song?id=1423179415" target="blank">我想以世纪和你在一起</a></li>
                </ul>
            </div>
            <p class="icp-info">A Gift for the 21th Birthday of zzy</p>
            <p class="rights">Coding With ❤️ By zhb</p>
            <div class="scrollToTop">
                <a href="#">
                    <i class="fas fa-chevron-up"></i>
                </a>
            </div>
        </div>
    </footer>
    <script src="static/js/anime.min.js"></script>
    <script src="static/js/glide.min.js"></script>
    <script src="static/js/isotope.pkgd.min.js"></script>
    <script src="static/js/smooth-scroll.polyfills.min.js"></script>
    <script src="static/js/index.js"></script>
</body>
</html>